<template>
    <fieldset>
        <legend>child组件</legend>
        <h1> child</h1>
        <!-- <button @click="handleClick">点击送给父组件</button>
        <h2>ref:{{ num }}</h2>
        <h2>normal:{{ gift }}</h2>-->
        <input type="text" ref="ipt"> 
        <subChild></subChild>
    </fieldset>
</template>


<script setup>
import subChild from "./06.subChild.vue"
import { ref, onMounted } from "vue"

let gift = 'vue3从入门到精通'

//-----------------定义emits----------------

// let emits = defineEmits(['res'])

//emits验证

let emits = defineEmits({
    res: arg => {
        if (arg && typeof arg === 'boolean') {
            return true
        } else {
            return false
        }
    }
})

let handleClick = () => {
    emits('res', gift)
}


//---------响应式api---------------

//-----ref响应式api基本使用

//这个num就是一个响应式数据
let num = ref(10)

//ref在逻辑层的时候使用或者修改都需要.value属性

//在模板中使用的时候,不需要.value
// console.log(num)
// setTimeout(() => {
//     num.value = 15
// }, 2000)

//---ref作用在组件上或者dom上

let ipt = ref()
//挂载之后的钩子相当于选项式中的mounted
onMounted(() => {
    // console.log(ipt.value)
    ipt.value.focus()
})


</script>

<!-- <script>
export default {
    data() {
        return {
            gift: 'vue从入门到精通'
        }
    },
    methods: {
        handleClick() {
            this.$emit('res',this.gift)
        }
    }
}
</script> -->